<template>
	<div class="securitySetting_page layer">
		<van-nav-bar :title="$t('my.securitySetting')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cell_box">
			<van-cell :title="$t('my.loginPassword')" is-link to="/changePassword" />
			<van-cell :title="$t('my.transactionPassword')" is-link to="/transactionPassword" />
		</div>
		<div class="cell_box">
			<van-cell :title="$t('my.TwoStepVerification')" class="autoValue">
				<van-switch :value="checked" size="14px" @input="changeSwitch" active-color="#0DF5E3" />
			</van-cell>
			<van-cell :title="$t('my.mobileBinding')" is-link
				:value="userInfo.mobile ? $utils.formatPhone(userInfo.mobile) : $t('my.unbound')" @click="handlePhone(1)" />
			<van-cell :title="$t('email')" :value="userInfo.email ? userInfo.email : $t('my.unbound')" is-link
				@click="handlePhone(2)" />
			<van-cell :title="$t('my.googleAuth')" :value="userInfo.google_flag == 2 ? $t('my.unbound') : ''" is-link />
		</div>
	</div>
</template>

<script>
	import {
		userProfile
	} from '@/api/my.js'
	export default {
		components: {},
		data() {
			return {
				checked: false,
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		watch: {
			userInfo: {
				handler(val) {
					if (val && val.id) {
						this.checked = val.two_verify_flag == 2 ? false : true
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {

		},
		methods: {
			handlePhone(type) {
				// to="/authentication"
				if (type == 1 ? this.userInfo.mobile : this.userInfo.email) {
					this.$router.push(`/authentication?type=${type}`)
				} else {
					this.$router.push(`/bindPhoneEmail?type=${type}`)
				}
			},
			async changeSwitch(val) {
				// console.log('val', val);
				const res = await userProfile({
					two_verify_flag: val ? 1 : 2
				})
				if (res && res.code == 1) {
					this.$store.dispatch('getUserInfo');
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.securitySetting_page {
		.cell_box {
			background-color: #3D3D3D;
			border-radius: 16px;
			overflow: hidden;
			margin-bottom: 20px;

			.van-cell {
				background-color: #3D3D3D;
				padding: 13px 20px;
				align-items: flex-end;

				::v-deep .van-cell__title {
					text-align: left;
					color: #fff;
				}

				::v-deep .van-cell__right-icon {
					color: #fff;
				}
			}

			.autoValue {
				::v-deep .van-cell__value {
					width: auto;
					flex: unset;
				}
			}
		}
	}
</style>